/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view class="index_class">
    
    <view class="edit-address">
      <form action="" class="new_from" style="display: block;">
        <div class="form_list">
          <span>收货人</span>
          <input type="text" v-model="addresinfo.contacts" placeholder="请填写收货人姓名">
        </div>
        <div class="form_list">
          <span>联系电话</span>
          <input type="number" v-model="addresinfo.phone" placeholder="请填写联系电话">
        </div>
        <div class="form_list">
          <span>所在省份</span>
          
          <!-- <picker  mode = 'selector' @change="bindPickerChange(1,$event)" range-key="pro_name" :range="pirkCity.prores">
                            <input style="width:100%" type="text" disabled="true" :value="pro_name.pro_name" placeholder="请选择所在省份">
                        </picker> -->
          <input type="text" v-model="chooseProvince.label" @click="openProvince" disabled="true" placeholder="请选择所在省">
        </div>
        <div class="form_list">
          <span>所在城市</span>
          
          <!-- <picker @click="isdisabled"  mode = 'selector' @change="bindPickerChange(2,$event)" range-key="city_name"  :disabled="disabled == 1? false : true" :range="pirkCity.cityres">
                            <input style="width:100%" type="text" disabled="true" :value="city_name.city_name" placeholder="请选择所在城市">
                        </picker> -->
          <input type="text" v-model="chooseCity.label" @click="openCity" disabled="true" placeholder="请选择所在市">
		  
        
        </div>
        <div class="form_list">
          <span>所在地区</span>
          <input type="text" v-model="chooseArea.label" @click="openArea" disabled="true" placeholder="请选择所在区">
        </div>
        <div class="form_list">
          <span>详细地址</span>
          <input type="text" v-model="addresinfo.address" placeholder="街道,楼牌号等">
        </div>
        <div class="form_list">
          <span>设置默认地址</span>
          <switch :checked="addresinfo.moren" @change="switch2Change" />
        </div>
        <mpvue-picker ref="mpvuePickerProvince" :mode="mode" :pickerValueDefault="pickerValueDefaultProvince" @onChange="onChangeProvince"
                      @onConfirm="onConfirmProvince" @onCancel="onCancelProvince" :pickerValueArray="getProvinceList">
        </mpvue-picker>
        <mpvue-picker ref="mpvuePickerCity" :mode="mode" :pickerValueDefault="pickerValueDefaultCity" @onChange="onChangeCity"
                      @onConfirm="onConfirmCity" @onCancel="onCancelCity" :pickerValueArray="getCityList">
        </mpvue-picker>
        <mpvue-picker ref="mpvuePickerArea" :mode="mode" :pickerValueDefault="pickerValueDefaultArea" @onChange="onChangeArea"
                      @onConfirm="onConfirmArea" @onCancel="onCancelArea" :pickerValueArray="getAreaList">
        </mpvue-picker>
      
      </form>
      <view class="add_btn">
        <button class="cash_btn" @click="NewAddress">保存地址</button>
      </view>
    </view>
  </view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
let addrId = ''
export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      mode: 'selector',
      addresinfo: {},
      pirkCity: {
        prores: [],
        cityres: [],
        areares: []
      },
      pro_name: {},
      city_name: {},
      area_name: {},
      disabled: 1,
      disabled2: 1,
      pickerValueDefaultProvince: [0],
      pickerValueDefaultCity: [0],
      pickerValueDefaultArea: [0],
      chooseProvince: {},
      chooseCity: {},
      chooseArea: {}
    }
  },
  onLoad(option) {
    
    addrId = option.addrId
    this.getinfo()
    
  },
  onShow() {
    this.$http.getpro().then(res => {
      if (res.status == 200) {
        this.pirkCity.prores = res.data
      }
    })
    
  },
  computed: {
    getProvinceList() {
      return this.pirkCity.prores.map(res => ({
        label: res.pro_name,
        value: res.id
      }))
    },
    getCityList() {
      return this.pirkCity.cityres.map(res => ({
        label: res.city_name,
        value: res.id
      }))
    },
    getAreaList() {
      return this.pirkCity.areares.map(res => ({
        label: res.area_name,
        value: res.id
      }))
    }
  },
  watch: {
    chooseProvince(val) {
      this.pirkCity.prores.forEach((element, k) => {
        if (element.id == val.value) {
          this.pro_name = element
          this.$http.getcity({
            pro_id: element.id
          }).then(res => {
            if (res.status == 200) {
                 // this.city_name = res.data[0]
              this.pirkCity.cityres = res.data
              this.disabled = 1
            }
          })
        }
      });
    },
    chooseCity(val) {
      this.pirkCity.cityres.forEach((element, k) => {
        if (element.id == val.value) {
          this.city_name = element
          
          this.$http.getarea({
            city_id: element.id
          }).then(res => {
            if (res.status == 200) {
              //    this.area_name = res.data[0]
              this.pirkCity.areares = res.data
              this.disabled2 = 1
            }
          })
        }
      });
    },
	
    chooseArea(val) {
      this.pirkCity.areares.forEach((element, k) => {
        if (element.id == val.value) {
          this.area_name = element
        }
      });
    }
  },
  methods: {
    openProvince() {
      this.$refs.mpvuePickerProvince.show();
    },
    onConfirmProvince(e) {
      this.chooseProvince = e
    },
    onChangeProvince(e) {
      this.chooseProvince = e
    },
    onCancelProvince(e) {
      console.log(e);
    },
    openCity() {
      this.$refs.mpvuePickerCity.show();
    },
    onConfirmCity(e) {
      this.chooseCity = e
    },
    onChangeCity(e) {
      this.chooseCity = e
    },
    onCancelCity(e) {
      console.log(e);
    },
    openArea() {
      this.$refs.mpvuePickerArea.show();
    },
    onConfirmArea(e) {
      this.chooseArea = e
    },
    onChangeArea(e) {
		alert(111)
		console.log(e,"看看这是啥")
      this.chooseArea = e
    },
    onCancelArea(e) {
      console.log(e);
    },
    NewAddress() {
      if (!this.addresinfo.contacts) {
        this.$toast('请输入收货人姓名')
        return false
      }
      if (!this.addresinfo.phone) {
        this.$toast('请输入联系人手机号')
        return false
      }
      if (!this.pro_name.id) {
        this.$toast("请选择所在省份");
        return false;
      }
      if (!this.city_name.id) {
        this.$toast("请选择所在城市");
        return false;
      }
      if (!this.area_name.id) {
        this.$toast("请选择所在地区");
        return false;
      }
      if (!this.addresinfo.address) {
        this.$toast('请填详细地址')
        return false
      }
      this.$http.getAddressedit({
        contacts: this.addresinfo.contacts,
        dz_id: this.addresinfo.id,
        phone: this.addresinfo.phone,
        address: this.addresinfo.address,
        moren: this.addresinfo.moren,
        pro_id: this.pro_name.id,
        city_id: this.city_name.id,
        area_id: this.area_name.id
      }).then(res => {
        if (res.status == 200) {
          this.$toast(res.mess)
          setTimeout(r => {
            this.getback()
          }, 1500)
        }
      })
    },
    getinfo() {
      this.$http.getAddressinfo({
        dz_id: addrId
      }).then(res => {
        if (res.status == 200) {
          this.addresinfo = res.data.address
          if (res.data.address.moren == 1) {
            this.addresinfo.moren = true;
          } else {
            this.addresinfo.moren = false;
          }
          res.data.prores.forEach((el,k) => {
            if (res.data.address.pro_id == el.id) {
              this.pro_name = el
              this.pickerValueDefaultProvince = [k.toString()]
            }
          })
          console.log(res.data.cityres)
          res.data.cityres.forEach((el,k) => {
            if (res.data.address.city_id == el.id) {
              this.city_name = el
              console.log(k)
              this.pickerValueDefaultCity = [k.toString()]
            }
          })
          res.data.areares.forEach((el,k) => {
            if (res.data.address.area_id == el.id) {
              this.area_name = el
              this.pickerValueDefaultArea = [k.toString()]
            }
          })
          
          this.$http.getpro().then(res => {
            if (res.status == 200) {
              this.pirkCity.prores = res.data
            }
          })
          this.$http.getcity({
            pro_id: this.addresinfo.pro_id
          }).then(res => {
            if (res.status == 200) {
              
              this.pirkCity.cityres = res.data
            }
          })
          
          this.$http.getarea({
            city_id: this.addresinfo.city_id
          }).then(res => {
            if (res.status == 200) {
              
              this.pirkCity.areares = res.data
            }
          })
          
        }
      })
    },
    bindPickerChange: function(index, e) {
      if (index == 1) {
        this.pirkCity.prores.forEach((element, k) => {
          if (k == e.detail.value) {
            this.pro_name = element
            
            this.$http.getcity({
              pro_id: element.id
            }).then(res => {
              if (res.status == 200) {
                this.city_name = ''
                this.area_name = ''
                this.pirkCity.cityres = res.data
                this.disabled = 1
              }
            })
          }
        });
      } else if (index == 2) {
        
        this.pirkCity.cityres.forEach((element, k) => {
          if (k == e.detail.value) {
            this.city_name = element
            
            this.$http.getarea({
              city_id: element.id
            }).then(res => {
              if (res.status == 200) {
                this.area_name = ''
                this.pirkCity.areares = res.data
                this.disabled2 = 1
              }
            })
          }
        });
      } else {
        
        this.pirkCity.areares.forEach((element, k) => {
          if (k == e.detail.value) {
            this.area_name = element
          }
        });
      }
    },
    isdisabled() {
      if (this.disabled == 0) {
        this.$toast('请按顺序选择')
      }
      
    },
    switch2Change(e) {
      this.addresinfo.moren = e.detail.value ? true : false
    }
    
  }
}
</script>

<style>
page {
  height: 100%;
  background-color: #f4f4f4;
}
</style>
